<template>
  <div style="height: calc(100vh - 40px); padding: 5px;">
    <div style="text-align: center">
      <JButton @click="colAdd(0)">新增行</JButton>
      <JButton @click="save" type="info">保存</JButton>
    </div>
    <div style="margin-top: 5px" class="top-table">
      <table  class="tb">
        <tbody>
        <tr>
          <td>page</td><td><JInput v-model="state.forms.page" size="small" /></td>
          <td>fileName</td><td><JInput v-model="state.forms.fileName" size="small" /></td>
          <td>formMod</td><td><JInput v-model="state.forms.formMod" size="small" /></td>
          <td>listUrl</td><td><JInput v-model="state.forms.listUrl" size="small" /></td>
          <td>saveUrl</td><td><JInput v-model="state.forms.saveUrl" size="small" /></td>
          <td>delUrl</td><td><JInput v-model="state.forms.delUrl" size="small" /></td>
          <td>delLimit</td><td>
          <code-editor :page="state.page" mode="javascript" v-model="state.forms.delLimit" @save="save" />
        </td>
          <td>width</td><td><JInput v-model="state.forms.width" size="small" /></td>
          <td>height</td><td><JInput v-model="state.forms.height" size="small" /></td>
        </tr>
        <tr>
          <td>pageRule</td> <td colspan="17">
          <code-editor :page="state.page" mode="javascript" v-model="state.forms.pageRule" @save="save" />
        </td>
        </tr>
        <tr>
          <td>查询 sqls</td> <td colspan="17"> <code-editor :page="state.page" mode="sqlserver" v-model="state.forms.sqls" /> </td>
        </tr>
        <tr>
          <td>查询 cols</td> <td colspan="17"> <JInput v-model="state.forms.cols" /></td>
        </tr>
        <tr>
          <td>查询 groupby</td> <td colspan="17"> <JInput v-model="state.forms.groupby" /></td>
        </tr>
        <tr>
          <td>orderby</td><td colspan="2"><JInput v-model="state.forms.orderby" size="small" /></td>
          <td class="tc">行按钮</td><td colspan="3">
          <code-editor :page="state.page" @save="save" mode="javascript" v-model="state.forms.rowBtn" />
        </td>
          <td class="tc">beforeAction</td><td colspan="3">
          <code-editor :page="state.page" mode="javascript" @save="save" v-model="state.forms.beforeAction" /></td>
          <td class="tc">afterAction</td><td colspan="2">
          <code-editor :page="state.page" mode="javascript" @save="save" v-model="state.forms.afterAction" /></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div style="margin-top: 5px;" class="bottom-table" :style="{ height: state.bH + 'px' }">
      <table style="border-collapse: collapse;border: none;">
        <thead>
        <tr>
          <th style="width: 40px">#</th>
          <th style="width: 60px; font-size: 12px">操作</th>
          <th style="width: 100px" title="字段名称">字段</th>
          <th style="width: 80px" title="字段名称">Id字段</th>
          <th style="width: 90px" title="变量名称">标题</th>
          <th style="width: 80px" title="变量类型">类型</th>
          <th style="width: 70px" title="默认">默认</th>
          <th style="width: 90px" title="保存唯一检测">唯一</th>
          <th style="width: 100px" title="组件">组件</th>
          <th style="width: 70px" title="下拉参数">cat</th>
          <th style="width: 70px" title="下拉参数">valueKey</th>
          <th style="width: 50px" title="必填">必填</th>
          <th style="width: 50px" title="只读">只读</th>
          <th style="width: 50px" title="表格显示是否可见">显示</th>
          <th style="width: 50px" title="表格显示是否可见">排序</th>
          <th style="width: 50px" title="是否弹出筛选框的字段">筛选</th>
          <th style="width: 50px" title="可导出">导出</th>
          <th style="width: 50px" title="脚底合计">合计</th>
          <th style="width: 50px" title="脚底合计">最后一行合计</th>
          <th style="width: 50px" title="脚底合计">小计合计</th>
          <th style="width: 50px" title="可点击">点击</th>
          <th style="width: 50px" title="新增字段">新增</th>
          <th style="width: 50px" title="弹出编辑框的字段">编辑</th>
          <th style="width: 100px" title="显示搜索">搜索</th>
          <th style="width: 70px" title="字段对齐">对齐</th>
          <th style="width: 70px" title="字段宽度">宽度</th>
          <th style="width: 80px" title="冻结">冻结</th>
          <th style="width: 100px" title="字段内容格式化">格式</th>
          <th style="width: 100px" title="list数据">数据list</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in state.forms.fields" :key="index">
          <td class="text-center">{{ index + 1 }}</td>
          <td class="text-center" style="font-size: 12px">
            <j-space>
              <span style="cursor: pointer;font-size: 15px;" @click="clickRow('up', index)">⬆</span>
              <span style="cursor: pointer;font-size: 15px;margin-left: 5px;;" @click="clickRow('down', index)">⬇</span>
              <span style="cursor: pointer;font-size: 20px;margin-left: 5px;;" @click="colAdd(index)">+</span>
              <span style="cursor: pointer;font-size: 20px;margin-left: 5px;" @click="colDel(index)">-</span>
            </j-space>
          </td>
          <td><JInput v-model="item.field" size="small" /></td>
          <td><JInput v-model="item.idField" size="small" /></td>
          <td><JInput v-model="item.title" size="small" /></td>
          <td>
            <j-select
                v-model="item.vartype"
                clearable
                :list="[
									{ id: 'text', name: 'text' },
									{ id: 'number', name: 'number' },
									{ id: 'boolean', name: 'boolean' },
								]"
            ></j-select>
          </td>
          <td><JInput v-model="item.default" size="small" /></td>
          <td><JInput v-model="item.unique" size="small" /></td>
          <td><j-select v-model="item.component" clearable :list="state.comps" /></td>
          <td><JInput v-model="item.cat" size="small" /></td>
          <td><JInput v-model="item.valueKey" size="small" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.required" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.readonly" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.visible" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.sortable" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.filter" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.excelOut" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.sum" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.sumIsLast" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.subSum" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.canClick" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.add" /></td>
          <td style="text-align: center"><tiny-checkbox v-model="item.edit" /></td>
          <td><JInput v-model="item.condition" size="small" /></td>
          <td>
            <j-select
                v-model="item.align"
                clearable
                :list="[
									{ id: 'left', name: 'left' },
									{ id: 'center', name: 'center' },
									{ id: 'right', name: 'right' },
								]"
            />
          </td>
          <td><JInput v-model="item.width" size="small" /></td>
          <td>
            <j-select
                v-model="item.fixed"
                clearable
                :list="[
									{ id: 'left', name: 'left' },
									{ id: 'right', name: 'right' },
								]"
            />
          </td>
          <td><j-select v-model="item.formatter" clearable :list="state.formatOption" /></td>
          <td>
            <code-editor :page="state.page" v-model="item.list" mode="javascript" />
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import {ref, onBeforeMount} from "vue";
// 表单设计
import tool from '@/utils/tool';
import CodeEditor from '@/views/design/codeEditor.vue';
import JSelect from "@/lui/JSelect.vue";
import {useRoute} from "vue-router";
import JCheck from "@/lui/JCheck.vue";
const route = useRoute()
const state = ref({
  bH: (window.innerHeight / 3) * 2 ,
  page: '',
  id: '',
  text: '',
  forms: {
    id: '',
    page: '',
    fileName: '',
    formMod: '',
    listUrl: '',
    saveUrl: '',
    delUrl: '',
    width: '',
    height: '',
    pageRule: '',
    sqls: '',
    orderby: '',
    rowBtn: '',
    detailGrid: '',
    cols: '',
    groupby: '',
    delLimit: '',
    hideFooter: false,
    hidePage: false,
    hideCheckbox: false,
    fields: [],
  },
  col: {
    field: '',
    idField: '',
    title: '',
    vartype: 'text',
    default: '',
    unique: '',
    component: 'JInput',
    cat: '',
    required: false,
    readonly: false,
    sortable: false,
    visible: true,
    filter: true,
    noFilter: false,
    add: true,
    edit: true,
    sum: false,
    excelOut: true,
    init: false,
    align: 'left',
    width: '',
    fixed: '',
    formatter: '',
  },
  formatOption: [
    { id: 'formatPrice', name: 'formatPrice' },
    { id: 'formatQty', name: 'formatQty' },
    { id: 'formatMoney', name: 'formatMoney' },
    { id: 'formatZero', name: 'formatZero' },
    { id: 'formatAmount', name: 'formatAmount' },
    { id: 'formatBillState', name: 'formatBillState' },
    { id: 'formatIsAdmin', name: 'formatIsAdmin' },
    { id: 'formatIs', name: 'formatIs' },
  ],
  columns: [
    { field: 'pidName', idField: 'pid', component: 'JSelectTree', title: '上级目录', add: true, edit: true, cat: 'formCustV5' },
    { field: 'name', component: 'JInput', title: '名称', add: true, edit: true, required: true },
  ],
  showPop: false,
  row: {},
  model: {},
  comps: [
    { id: 'JInput', name: 'JInput' },
    { id: 'JAuto', name: 'JAuto' },
    { id: 'JPicker', name: 'JPicker' },
    { id: 'JSelect', name: 'JSelect' },
    { id: 'JSelectTree', name: 'JSelectTree' },
    { id: 'JCheck', name: 'JCheck' },
    { id: 'JTab', name: 'JTab' },
  ],
  dialog: null,
  ds: false,
  showHelp: false,
  query: {},
  cont: '',
  aiEditor: null,
})
onBeforeMount(() => {
  if (route.query && route.query.page) {
    state.value.query = route.query
    document.title = route.query.name
    tool.Session.set('token', state.value.query.token)
    tool.Session.set('dev', state.value.query.dev)
    clickLi(route.query.page);
  }
})

const ohelp = () => {
  if(state.value.forms.id && state.value.forms.page && state.value.forms.fileName) {
    // router.push({name: 'helpedit', query: {routeName: state.value.forms.page, title: state.value.forms.fileName}})
    window.open('/help/?routeName='+state.value.forms.page+'&title='+state.value.forms.fileName)
  }
  else {
    tool.err('还没有保存页面')
  }
}
// 保存数据
const save = () => {
  if (!state.value.forms.page) return tool.err('请输入page');
  if (!state.value.forms.fileName) return tool.err('请输入fileName');
  let data = { ...state.value.forms };
  data.fields = JSON.stringify(data.fields);
  tool.post('design/saveFormCust', { data }).then((ret) => {
    if (ret.data) {
      state.value.id = ret.data.id;
      state.value.forms.id = ret.data.id;
    }
  });
}
// 选中节点
const clickLi = (page) => {
  state.value.page = page;
  tool.post('design/getByPage', { page: page }, true).then((ret) => {
    if (ret.stat && ret.data) {
      if (ret.data.fields) {
        ret.data.fields = JSON.parse(ret.data.fields);
      }
      state.value.forms = ret.data;
    }
  });
}
// 新增行
const clickRow = (type, index) => {
  let list = state.value.forms.fields;
  if (type === 'up') {
    if (index === 0) return;
    let row = list[index];
    list.splice(index, 1);
    list.splice(index - 1, 0, row);
  }
  if (type === 'down') {
    if (index === list.length - 1) return;
    let row = list[index];
    list.splice(index, 1);
    list.splice(index + 1, 0, row);
  }
}
const colAdd = (index) => {
  let c = tool.xe.clone(state.value.col);
  state.value.forms.fields.splice(index + 1, 0, c);
}
const colDel = (index) => {
  if (state.value.forms.fields.length === 1) return;
  state.value.forms.fields.splice(index, 1);
}

</script>

<style scoped lang="scss">
.tb{
  border-collapse: collapse;

  td {
    padding: 2px 0;
    border: none;
  }
}
li {
  padding-left: 5px;
  &:hover {
    background: #3399cc;
    cursor: pointer;
  }
  &.active {
    background: orange;
  }
}
th {
  height: 30px;
  font-weight: 300;
  text-align: center;
}
td,
th {
  border: 1px solid #c5c8ce;
  padding: 0;
}

input {
  outline: none;
  border: none;
  width: 100%;
  height: 25px;
  padding-left: 2px;
  background: transparent;
}
.bottom-table {
  overflow: auto;
}
.text-center {
  text-align: center;
}
.bottom-table {
  tr:hover {
    background-color: #e2e2e2;
  }
}
</style>